<template>
  <div class="table-box">
    <ProTable ref="proTable" title="登录日志" :columns="columns" :request-api="getLoginRecordList">
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDialog('查看', scope.row)"> 查看 </el-button>
      </template>
    </ProTable>
    <LoginRecordDialog ref="loginRecordDialogRef" />
  </div>
</template>

<script setup lang="tsx" name="loginRecord">
import { ref } from "vue";
import { System } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import LoginRecordDialog from "@/views/system/components/LoginRecordDialog.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { View } from "@element-plus/icons-vue";
import { getLoginRecordList } from "@/api/modules/system";

const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps<System.ResLoginRecordList>[] = [
  { prop: "id", label: "主键", width: 80 },
  { prop: "username", label: "用户账号", minWidth: 120, align: "left", search: { el: "input" } },
  {
    sortable: true,
    prop: "os",
    label: "操作系统",
    align: "left",
    minWidth: 240,
    search: {
      el: "date-picker",
      key: "createTime",
      label: "时间范围",
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    }
  },
  { sortable: true, prop: "browser", minWidth: 360, label: "浏览器类型" },
  { sortable: true, prop: "id", label: "ip地址", minWidth: 100, align: "left" },
  { sortable: true, prop: "operType", label: "操作类型", minWidth: 120, align: "left" },
  { sortable: true, prop: "createTime", label: "登录时间", minWidth: 164, align: "left" },
  { prop: "operation", label: "操作", fixed: "right", width: 80 }
];

// 打开 dialog(新增、查看、编辑)
const loginRecordDialogRef = ref<InstanceType<typeof LoginRecordDialog> | null>(null);
const openDialog = (title: string, row: Partial<System.ResLoginRecordList> = {}) => {
  const params = {
    title,
    isView: true,
    row: { ...row }
  };
  loginRecordDialogRef.value?.acceptParams(params);
};
</script>
